<template>
  <div class="NotFound flex">
    <div class="img"></div>
    <div class="content flex flex_column flex_center">
      <div class="code">{{ code }}</div>
      <div class="message">{{ msg }}</div>
      <div class="flex">
        <div class="btn m_10" @click="back">返回上一页</div>
        <div class="btn m_10" @click="goto">首 页</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NotFound",
  data() {
    return {
      code: 404,
      msg: "您访问的页面不存在",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    goto() {
      this.$router.push("/home");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/theme.scss";
.NotFound {
  width: 100%;
  height: 100vh;
  .img {
    width: 60%;
    margin-left: 6%;
    background-image: url(../assets/images/404-1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .content {
    width: 40%;
    height: 100%;
    .code {
      font-size: 100px;
      font-weight: bold;
    }
    .message {
      font-size: 32px;
      margin-top: 10px;
    }
    .btn {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 10px;
      color: $blue-900;
      background: $blue-100;
      margin-top: 10px;
      cursor: pointer;
      &:hover {
        color: $white;
        background: $blue-500;
      }
    }
  }
}
</style>